<template>
    <div class="item">
        <span class="label">收集的数据：</span>
        <span class="content">{{ figureVal }}</span>
    </div>

    <div class="item">
        <span class="label">千分位：</span>
        <GFigureInput v-model="figureVal" to-thousands placeholder="请输入...." />
    </div>
    <div class="item">
        <span class="label">展示保留两位小数：</span>
        <GFigureInput
            v-model="figureVal"
            to-thousands
            :show-decimals-length="2"
            placeholder="请输入...."
        />
    </div>
    <div class="item">
        <span class="label">展示保留四位小数：</span>
        <GFigureInput
            v-model="figureVal"
            to-thousands
            :show-decimals-length="4"
            placeholder="请输入...."
        />
    </div>
    <div class="item">
        <span class="label">至多输入两位小数：</span>
        <GFigureInput
            v-model="figureVal"
            to-thousands
            :val-decimals-length="2"
            placeholder="请输入...."
        />
    </div>
</template>

<script lang="ts">
export default {
    name: 'FigureInputDemo2'
}
</script>

<script lang="ts" setup>
import { toRaw, watch, ref, computed, reactive, toRefs } from 'vue'
const figureVal = ref<number | string>('')
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;

    .label {
        width: 220px;
        text-align: right;
        line-height: 40px;
        padding-right: 20px;
    }

    .content {
        width: 100%;
        font-weight: 700;
    }
}
</style>
